<!-- RefExample.vue -->
<script setup lang="ts">
import { ref } from 'vue'

// 创建响应式数据
const hp = ref(100)          // 英雄血量
const attacking = ref(false) // 是否正在攻击

// 修改数据
const attack = () => {
  attacking.value = true
  setTimeout(() => {
    hp.value -= 20
    attacking.value = false
  }, 500)
}
</script>

<template>
  <div class="ref-example">
    <h2>勇者血量：{{ hp }}</h2>
    <button @click="attack" :disabled="attacking">
      {{ attacking ? '攻击中...' : '发起攻击' }}
    </button>
  </div>
</template>

<style scoped>
.ref-example {
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 4px;
}
</style>